<template>
  <a-modal
    :visible="showModal"
    title="预览"
    ok-text="保存"
    @ok="onSaveModal()"
    @cancel="close()"
    width="1000px"
    :footer="false"
  >
    <iframe
      v-if="iframeSrc"
      ref="iframeRef"
      :src="iframeSrc"
      allowfullscreen="true"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      frameborder="0"
      style="width: 100%; height: 700px"
      @load="setIframeHeight"
    ></iframe>
  </a-modal>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { getToken } from "@/utils/auth";

const props = defineProps({
  modal: { type: Object, default: () => {} },
});
let showModal = ref(false);

let iframeSrc = ref("");
const iframeRef = ref();

const handleMessage = (event) => {
  console.log("handleMessage", event.data);
  // 根据上面制定的结构来解析iframe内部发回来的数据
  const type = event.data;
};

const show = async () => {
  showModal.value = true;
  window.addEventListener("message", handleMessage);
  nextTick(() => {
    const { id } = props.modal;
    console.log(id, "id");
    iframeSrc.value = `http://203.33.215.198:9081/#/builder?formId=${id}&token=${encodeURIComponent(getToken())}`;
  });
};

const close = () => {
  iframeSrc.value = "";
  showModal.value = false;
  window.removeEventListener("message", handleMessage);
};

defineExpose({ show, close });
</script>
